<!-- 一张图 -->
<template>
  <div class="aPictureInfo">

    <!--地图-->
    <div class="aPicture-map"
         ref="aPicture-map"></div>

    <!--空间查询按钮-->
    <div class="aPicture-search-space"
         :class="{'aPicture-search-spaceClose': !mapSearchSapceStatus}"
         @click="mapSearchSpace"
         v-show="isShowSearch">
      <Icon type="md-help-buoy" />
      <span>{{mapSearchSapceStr}}</span>
    </div>

    <!--清除空间查询结果-->
    <div class="aPicture-search-spaceClear"
         v-show="showMapSearchSpaceClear"
         @click="mapSearchSpaceClear">
      <span>清除空间查询结果</span>
    </div>

    <!--地图搜索框 选择类别-->
    <transition name="search-type-animaite">
      <div class="aPicture-search-typeList"
           v-show="showSearchType">
        <div class="aPicture-search-rivers"
             :class="{'aPicture-search-iconsActive': searchType === 'river'}"
             @click="mapSearchTypeChose('river')">
          <span class="iconfont icon-tzdheliu"></span>
          <span>搜河流</span>
        </div>
        <div class="aPicture-search-icons"
             :class="{'aPicture-search-iconsActive': searchType === 'icons'}"
             @click="mapSearchTypeChose('icons')">
          <span class="iconfont icon-location"></span>
          <span>搜建筑</span>
        </div>
        <div class="aPicture-search-rivers"
             :class="{'aPicture-search-iconsActive': searchType === 'rivers'}"
             @click="mapSearchTypeChose('rivers')">
          <span class="iconfont icon-tzdheliu"></span>
          <span>搜河涌</span>
        </div>
        <div class="aPicture-search-typeClose"
             @click="mapSearchTypeClick">
          <Icon type="close"></Icon>
        </div>
      </div>
    </transition>

    <!--地图搜索框-->
    <div class="aPicture-search-form"
         v-show="isShowSearch">

      <div class="aPicture-search-input">
        <div class="aPicture-search-type"
             @click="mapSearchTypeClick">
          <span class="iconfont icon-menu"></span>
        </div>
        <input type="text"
               v-model="mapSearchInput"
               :placeholder="mapSearchContentPlacement"
               @keyup.enter="mapSearch" />
        <div class="aPicture-search-delete"
             @click="mapSearchDelete">
          <Icon type="close"></Icon>
        </div>
      </div>
      <div class="aPicture-search-button"
           @click="mapSearch">
        <!-- <Icon type="md-helpsearch"></Icon> -->
         <Icon type="md-search" />
      </div>

    </div>

    <!--地图搜索框操作显示面板-->
    <transition enter-active-class="fadeIn"
                leave-active-class="fadeOut">

      <div class="aPicture-search-actionShow animated"
           v-show="!showSearchContent && mapSearchList.length"
           @click="backMapSearchList">
        <Icon type="chevron-left"></Icon>
        <span>显示搜索到关于“{{mapSearchInputClone}}”的{{mapSearchList.length}}条结果</span>
      </div>

    </transition>

    <!--地图搜索框无结果显示面板-->
    <!-- <transition enter-active-class="fadeIn" leave-active-class="fadeOut">

			<div
				class="aPicture-search-noResult animated"
				v-show="showNoSearchResult">
				<Icon type="close-circled"></Icon>
				<span>在佛山市范围内未找到“{{mapSearchInputClone}}”相关地点</span>
			</div>

		</transition> -->

    <!--地图搜索框显示列表-->
    <transition enter-active-class="fadeIn"
                leave-active-class="fadeOut">

      <div class="aPicture-search-content animated"
           v-show="showSearchContent">
        <ul class="aPicture-search-list">
          <li class="aPicture-search-detail"
              v-for="(item, index) in mapSearchList"
              @click="mapSearchClick(item, index)"
              @mouseenter="mapSearchEnter(item, index)"
              @mouseleave="mapSearchLeave(item, index)">
            <div class="aPicture-search-icon">
              <img :src="`static/img/mapIcon/${item.type}.png`" />
            </div>
            <div class="aPicture-search-text">
              {{item.name}}
            </div>
          </li>
        </ul>
      </div>

    </transition>

    <!--左边信息栏-->
    <div class="left-read">

      <!--头部-->
      <div class="left-read-head clear">
        <div class="left-read-scale pull-left"
             @click="leftReadScaleClick">
          <Icon :type="scaleIcon"></Icon>
        </div>
        <div class="left-read-title pull-left">图层展示</div>
      </div>

      <!--图层分类-->
      <div class="left-read-content"
           :class="{'left-read-in': isIn}">
        <ul class="left-read-list">
          <li class="left-read-detail"
              :class="{'left-read-detail-selected': item.selected}"
              v-for="item in layerTypes"
              @click="detailCLick(item)">
            <Radio v-model="item.selected">
              <img class="left-read-typeImg"
                   :src="item.img"
                   width="25px" />
              <span>{{item.name}}</span>
            </Radio>
          </li>
        </ul>
      </div>

    </div>

    <!--左边信息栏二级菜单-->
    <div class="left-read left-read-layers">
      <transition enter-active-class="fadeInLeft"
                  leave-active-class="fadeOutLeft">
        <div class="left-read-content animated"
             v-show="!isIn">
          <template v-if="isFoShanRiver">
            <Collapse simple accordion>
              <Panel :name="area.name" v-for="(area, index) in areaList" :key="index">
                <div class="check-all">
                  <Checkbox
                      :indeterminate="area.indeterminate"
                      :value="area.checkAll"
                      @click.stop.prevent.native="handleCheckAll(area)">{{area.name}}</Checkbox>
                </div>
                <div slot="content" class="checkbox-container">
                  <CheckboxGroup v-model="area.checkAllGroup" :data-index="index" @on-change="checkAllGroupChange($event,area)">
                      <Checkbox :label="town.name+','+town.level" v-for="(town, idx) in area.children" :key="idx">{{town.name}}</Checkbox>
                  </CheckboxGroup>
                </div>
              </Panel>
            </Collapse>
          </template>
          <template v-else>
            <ul class="left-read-list">
              <li class="left-read-detail"
                  :class="{'left-read-detail-selected': item.selected}"
                  v-for="item in layerList"
                  @click.stop="chosenClick(item)">
                <div class="left-read-mask"></div>
                <Checkbox v-model="item.selected">
                  <img v-if="item.img"
                      :src="item.img"
                      width="20px" />
                  <span>{{item.name}}</span>
                </Checkbox>
              </li>
            </ul>
          </template>
        </div>
      </transition>

    </div>

    <!--水位图例-->
    <div class="waterLevel-legend">
      <ul class="waterLevel-legend-list">
        <li class="waterLevel-legend-detail"
            :class="item.className"
            v-for="item in waterLegend">
          <header class="waterLevel-legend-head">{{item.title}}</header>
          <ul class="waterLevel-legend-content">
            <li class="waterLevel-legend-li"
                v-for="items in item.content">
              <img :src="items.img" />
              <span>{{items.name}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!--群众热力分布图例-->
    <div class="heatMap-legend"
         v-show="isHeatMapLegend">
      <div class="heatMap-legend-warpper">
        <div class="heatMap-legend-title">
          群众热力分布图例
        </div>
        <div class="heatMap-legend-content">
          <div class="heatMap-legend-data"></div>
          <ul class="heatMap-legend-text">
            <li class="heatMap-legend-detail"
                v-for="index in 5">
              <img class="heatMap-legend-img"
                   src="./img/heatMapLegend.png" />
              <div class="heatMap-legend-div">{{filterHeatMapData(index)}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!--时间轴-->
    <div class="timeAxis">

      <!--雨-->
      <div class="timeAxis-detail"
           v-show="rainLayerTimeAxis">
        <time-axis ref="rainLayerTimeAxis"
                   title="雨"
                   layerName="rainLayer"
                   :datas="rainLayerArr"
                   @timelineClick="timelineClick"></time-axis>
      </div>

      <!--风力风向-->
      <div class="timeAxis-detail"
           v-show="windLayerTimeAxis">
        <time-axis ref="windLayerTimeAxis"
                   title="风力风向"
                   layerName="windLayer"
                   :datas="windLayerArr"
                   @timelineClick="timelineClick"></time-axis>
      </div>

      <!--温度-->
      <div class="timeAxis-detail"
           v-show="temperatureLayerTimeAxis">
        <time-axis ref="temperatureLayerTimeAxis"
                   title="温度"
                   layerName="temperatureLayer"
                   :datas="temperatureLayerArr"
                   @timelineClick="timelineClick"></time-axis>
      </div>

      <!--群众热力分布-->
      <div class="timeAxis-detail"
           v-show="massHeatLayerTimeAxis">
        <time-axis ref="massHeatLayerTimeAxis"
                   title="群众热力分布"
                   layerName="massHeatLayer"
                   :datas="massHeatLayerArr"
                   @timelineClick="timelineClick"></time-axis>
      </div>
    </div>

    <!--台风路径标题列表-->
    <div class="typhoon-titles"
         v-show="isShowTyphoonClose">
      <ul class="typhoon-titleList">
        <li v-for="item in typhoonTitles"
            v-show="typhoonTitles.length">
          {{item.tfbh}} - {{item.name}}（风力{{item.points[0].power}}级）
        </li>
      </ul>
      <div class="typhoon-titleNoTyphoon"
           v-show="!typhoonTitles.length">暂无台风</div>
    </div>

    <!--台风路径信息关闭时，显示的图例图标-->
    <div class="typhoon-closIng"
         v-show="isShowTyphoonClose"
         @click="closeShowTyphoonInfo(true)">
      <Icon type="navicon-round"></Icon>
    </div>

    <!--台风路径 信息-->
    <div class="typhoon-info"
         :class="{'typhoon-info-show': isShowTyphoonInfo}">

      <div class="typhoon-history">
        <div class="typhoon-history-header">
          台风列表
          <div class="typhoon-close"
               @click="closeShowTyphoonInfo(false)">
            <Icon type="close-round"></Icon>
          </div>
        </div>
        <div class="typhoon-history-table">
          <Table size="small"
                 border
                 :loading="showTyphoonLoading"
                 :height="typhoonHistoryHeight"
                 :columns="typhoonHistoryTh"
                 :data="typhoonHistoryTb"></Table>
        </div>
      </div>

      <div class="typhoon-legend-ring">
        <div class="typhoon-legend-header">风圈图例</div>
        <div class="typhoon-legend-list">
          <div class="typhoon-legend-detail">
            <div class="typhoon-legend-circle-7"></div>
            <div>7级风圈</div>
          </div>
          <div class="typhoon-legend-detail">
            <div class="typhoon-legend-circle-10"></div>
            <div>10级风圈</div>
          </div>
          <div class="typhoon-legend-detail">
            <div class="typhoon-legend-circle-12"></div>
            <div>12级风圈</div>
          </div>
        </div>
      </div>

      <div class="typhoon-legend-center">
        <div class="typhoon-legend-header">台风等级图例</div>
        <div class="typhoon-legend-list">
          <div class="typhoon-legend-detail"
               v-for="item in typhoonStrongLegend">
            <!-- 项目中本来就没有这些图片，为避免报错先注释 2021-01-29 by liangxiani -->
            <!-- <img :src="item.img" /> -->
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>

      <div class="typhoon-legend-prediction">
        <div class="typhoon-legend-header">预测台图例</div>
        <div class="typhoon-legend-list">
          <div class="typhoon-legend-detail"
               v-for="item in typhoonForecastLegend">
            <div class="typhoon-legend-forecast">
              <div v-for="index in 3"
                   :style="{'background-color': item.color}"></div>
            </div>
            <div>{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>

    <!--云图、雷达 时间-->
    <div class="cloud-radar-time"
         v-show="cloudradarTimes.length">
      <ul class="cloud-radar-timeList clear">
        <li v-for="item in cloudradarTimes"
            class="pull-right">
          {{item.name}}：{{item.info.datatime}}
        </li>
      </ul>
    </div>

    <!-- 实时数据-模态框 -->
    <!--土壤湿度-->
    <soilMoisture-model ref="soilMoisture-model"></soilMoisture-model>

    <!--台风、云图、雷达-->
    <typhoon-model ref="typhoon-model"></typhoon-model>

    <!--水库-->
    <reservoir-model ref="reservoir-model"></reservoir-model>

    <!--水闸-->
    <gate-model ref="gate-model"></gate-model>

    <!--泵站-->
    <pump-model ref="pump-model"></pump-model>

    <!--内涝点-->
    <waterlogging-model ref="waterlogging-model"></waterlogging-model>

    <!--水位站-->
    <waterLevel-model ref="waterLevel-model"></waterLevel-model>

    <!-- 水文站 -->
    <hydrology-model ref="hydrology-model"></hydrology-model>

    <!--潮位站-->
    <tideGauge-model ref="tideGauge-model"></tideGauge-model>

    <!--建筑工地-->
    <constructionSite-model ref="constructionSite-model"></constructionSite-model>

    <!--危险品仓库-->
    <dangerousGoods-model ref="dangerousGoods-model"></dangerousGoods-model>

    <!-- 基础数据-模态框 -->
    <!-- 水网 -->
    <singleWaterNet-model ref="singleWaterNet-model"></singleWaterNet-model>

    <!-- 佛山河流 -->
    <foshanriver-model ref="foshanriver-model"></foshanriver-model>

    <!-- 排水口 -->
    <drainPort-model ref="drainPort-model"></drainPort-model>

    <!-- 构建筑物 -->
    <building-model ref="building-model"></building-model>

    <!-- 堤围 -->
    <banks-model ref="banks-model"></banks-model>

    <!-- 险段 -->
    <criticals-model ref="criticals-model"></criticals-model>

    <!-- 涵闸 -->
    <waterGate-model ref="waterGate-model"></waterGate-model>

    <!-- 排灌站 -->
    <drainStation-model ref="drainStation-model"></drainStation-model>

    <!-- 水浸黑点 -->
    <blackPoint-model ref="blackPoint-model"></blackPoint-model>

    <!--下沉隧道-->
    <sunkenTunnel-model ref="sunkenTunnel-model"></sunkenTunnel-model>

    <!-- 供水管网 -->
    <supplyPipe-model ref="supplyPipe-model"></supplyPipe-model>

    <!-- 自来水厂 -->
    <waterFactory-model ref="waterFactory-model"></waterFactory-model>

    <!-- 供水设施 -->
    <supplyDevice-model ref="supplyDevice-model"></supplyDevice-model>

    <!-- 排水管 -->
    <drainPipe-model ref="drainPipe-model"></drainPipe-model>

    <!-- 污水厂 -->
    <dirtyFactory-model ref="dirtyFactory-model"></dirtyFactory-model>

    <!-- 排水设施 -->
    <drainDevice-model ref="drainDevice-model"></drainDevice-model>

    <!-- 村居 -->
    <rusticate-model ref="rusticate-model"></rusticate-model>

    <!-- 地质灾害 -->
    <hazard-model ref="hazard-model"></hazard-model>

    <!-- 医院 -->
    <hospital-model ref="hospital-model"></hospital-model>

    <!-- 学校 -->
    <school-model ref="school-model"></school-model>

    <!-- 银行 -->
    <bank-model ref="bank-model"></bank-model>

    <!-- 客运站 -->
    <busStation-model ref="busStation-model"></busStation-model>

    <!-- 商场 -->
    <shop-model ref="shop-model"></shop-model>

    <!--三防数据-模态框-->
    <!-- 抢险队 -->
    <emergencySquad-model ref="emergencySquad-model"></emergencySquad-model>

    <!-- 救援队 -->
    <rescueTeam-model ref="rescueTeam-model"></rescueTeam-model>

    <!-- 重点人员实时位置 -->
    <liabilityPerson-model ref="liabilityPerson-model"></liabilityPerson-model>

    <!-- 三防专家实时位置 -->
    <defenseExpert-model ref="defenseExpert-model"></defenseExpert-model>

    <!-- 避难所 -->
    <refuge-model ref="refuge-model"></refuge-model>

    <!-- 物资仓库 -->
    <emergency-model ref="emergency-model"></emergency-model>

    <!-- 水利工程视频-->
    <waterProjectVideo-model ref="waterProjectVideo-model"></waterProjectVideo-model>

    <!-- 污染源-->
    <pollution-model ref="pollution-model"></pollution-model>

    <!-- 河流视频-->
    <video-model ref="video-model"></video-model>

    <!-- 水质-->
    <waterQuality-model ref="waterQuality-model"></waterQuality-model>

    <!-- 雨量-->
    <yuliang-model ref="yuliang-model"></yuliang-model>
    <!--loading-->
    <loading v-show="showLoading"></loading>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
// 实时数据
import soilMoistureModel from './realData/soilMoistureModel.vue';
import typhoonModel from './realData/typhoonModel.vue';
import reservoirModel from './realData/reservoirModel.vue';
import gateModel from './realData/gateModel.vue';
import pumpModel from './realData/pumpModel.vue';
import waterloggingModel from './realData/waterloggingModel.vue';
import waterLevelModel from './realData/waterLevelModel.vue';
import hydrologyModel from './realData/hydrologyModel.vue';
import tideGaugeModel from './realData/tideGaugeModel.vue';
import constructionSiteModel from './realData/constructionSiteModel.vue';
import dangerousGoodsModel from './realData/dangerousGoodsModel.vue';
// 基础数据
import singleWaterNetModel from './baseData/singleWaterNetModel.vue';
import drainPortModel from './baseData/drainPortModel.vue';
import buildingModel from './baseData/buildingModel.vue';
import banksModel from './baseData/banksModel.vue';
import criticalsModel from './baseData/criticalsModel.vue';
import waterGateModel from './baseData/waterGateModel.vue';
import drainStationModel from './baseData/drainStationModel.vue';
import hospitalModel from './baseData/hospitalModel.vue';
import schoolModel from './baseData/schoolModel.vue';
import bankModel from './baseData/bankModel.vue';
import busStationModel from './baseData/busStationModel.vue';
import shopModel from './baseData/shopModel.vue';
import blackPointModel from './baseData/blackPointModel.vue';
import sunkenTunnelModel from './baseData/sunkenTunnelModel.vue';
import supplyPipeModel from './baseData/supplyPipeModel.vue';
import waterFactoryModel from './baseData/waterFactoryModel.vue';
import supplyDeviceModel from './baseData/supplyDeviceModel.vue';
import drainPipeModel from './baseData/drainPipeModel.vue';
import dirtyFactoryModel from './baseData/dirtyFactoryModel.vue';
import drainDeviceModel from './baseData/drainDeviceModel.vue';
import rusticateModel from './baseData/rusticateModel.vue';
import hazardModel from './commandData/hazardModel.vue';
import foshanRiverModel from './baseData/foshanRiverModel.vue';
// 三防数据
import emergencySquadModel from './commandData/emergencySquadModel.vue';
import rescueTeamModel from './commandData/rescueTeamModel.vue';
import liabilityPersonModel from './commandData/liabilityPersonModel.vue';
import defenseExpertModel from './commandData/defenseExpertModel.vue';
import emergencyModel from './commandData/emergencyModel.vue';
import refugeModel from './commandData/refugeModel.vue';
import waterProjectVideoModel from './commandData/waterProjectVideoModel.vue';
import pollutionModel from './realData/pollutionModel.vue';
import videoModel from './realData/videoModel.vue';
import waterQualityModel from './realData/waterQualityModel.vue';
import yuliangModel from './realData/yuliangModel.vue';
import { loadingMixin, timeAxisMixin } from 'common/js/mixins';
import {
  getClassEls,
  cloneObj,
  spliceStr,
  errorNotice,
  errorMessage,
} from 'common/js/dom';
import {
  leftReadDetails,
  typhoonStrongLegend,
  typhoonForecastLegend,
} from 'common/js/module';
import { typhoonHistoryTh } from 'common/js/table';
import { filterTyphoonBaseInfo } from 'common/js/util';
import { Static, ERR_OK, ERR_CUSTOM } from 'api/config';
import {
  getSingleWaterNet,
  getWaterNetInfo,
  getTyphoonList,
  getTyphoonSingelInfo,
} from 'api/aPicture';
import {
  getLayer,
  createMap,
  createMapCircleDraw,
  createdArcGISSource,
  createdKmlSource,
  createSearchRiverSource,
  createTyphoon,
} from 'api/map';
import { mapMutations } from 'vuex';

let layers = {};
const searchLayerName = 'searchLayer';
let waterLevelIngIndex = leftReadDetails.findIndex(
  items => items.id === 'waterLevelIng'
);
let gateIndex = leftReadDetails[waterLevelIngIndex].children.findIndex(
  items => items.layer === 'gateLayer'
);
let pumpIndex = leftReadDetails[waterLevelIngIndex].children.findIndex(
  items => items.layer === 'pumpLayer'
);
let weatherIngIndex = leftReadDetails.findIndex(
  items => items.id === 'weatherIng'
);
let typhoonIndex = leftReadDetails[weatherIngIndex].children.findIndex(
  items => items.layer === 'typhoonLayer'
);
let cloudIndex = leftReadDetails[weatherIngIndex].children.findIndex(
  items => items.layer === 'cloudLayer'
);
let radarIndex = leftReadDetails[weatherIngIndex].children.findIndex(
  items => items.layer === 'radarLayer'
);

export default {
  mixins: [loadingMixin, timeAxisMixin],
  components: {
    // 实时数据
    'soilMoisture-model': soilMoistureModel,
    'typhoon-model': typhoonModel,
    'reservoir-model': reservoirModel,
    'gate-model': gateModel,
    'pump-model': pumpModel,
    'waterlogging-model': waterloggingModel,
    'waterLevel-model': waterLevelModel,
    'hydrology-model': hydrologyModel,
    'tideGauge-model': tideGaugeModel,
    'constructionSite-model': constructionSiteModel,
    'dangerousGoods-model': dangerousGoodsModel,
    // 基础数据
    'singleWaterNet-model': singleWaterNetModel,
    'drainPort-model': drainPortModel,
    'building-model': buildingModel,
    'banks-model': banksModel,
    'criticals-model': criticalsModel,
    'waterGate-model': waterGateModel,
    'drainStation-model': drainStationModel,
    'hospital-model': hospitalModel,
    'school-model': schoolModel,
    'bank-model': bankModel,
    'busStation-model': busStationModel,
    'shop-model': shopModel,
    'blackPoint-model': blackPointModel,
    'sunkenTunnel-model': sunkenTunnelModel,
    'supplyPipe-model': supplyPipeModel,
    'waterFactory-model': waterFactoryModel,
    'supplyDevice-model': supplyDeviceModel,
    'drainPipe-model': drainPipeModel,
    'dirtyFactory-model': dirtyFactoryModel,
    'drainDevice-model': drainDeviceModel,
    'rusticate-model': rusticateModel,
    'hazard-model': hazardModel,
    'foshanriver-model': foshanRiverModel,
    // 三防数据
    'emergencySquad-model': emergencySquadModel,
    'rescueTeam-model': rescueTeamModel,
    'liabilityPerson-model': liabilityPersonModel,
    'defenseExpert-model': defenseExpertModel,
    'emergency-model': emergencyModel,
    'refuge-model': refugeModel,
    'waterProjectVideo-model': waterProjectVideoModel,
    'pollution-model': pollutionModel,
    'video-model': videoModel,
    'waterQuality-model': waterQualityModel,
    'yuliang-model': yuliangModel,
  },
  computed: {
    // 用于左边信息栏 显示和隐藏 切换时 图标的更换
    scaleIcon() {
      return this.isIn ? 'chevron-down' : 'chevron-up';
    },
    // 用于左边信息栏 二级菜单 显示的列表
    layerList() {
      let arr = [];
      for (let i of this.layerTypes) {
        if (i.selected) {
          arr = i.children;
          break;
        }
      }
      return arr;
    },
    // 用于空间查询状态 切换时文字的更换
    mapSearchSapceStr() {
      return this.mapSearchSapceStatus ? '开启区域查询' : '关闭区域查询';
    },
    // 用于地图搜索框 placement 切换时文字的更换
    mapSearchContentPlacement() {
      if (this.searchType === 'icos') {
        return '搜建筑';
      } else if (this.searchType === 'rivers') {
        return '搜河涌';
      } else if (this.searchType === 'river') {
        return '搜河流';
      }
    },
    // 用于计算台风列表的高度
    typhoonHistoryHeight() {
      return this.typhoonHistoryTb.length >= 5 ? '210' : '';
    },
    // 用于判断当前地图上是否有台风
    typhoonHistoryChosed() {
      let bol = false;
      for (let i = 0; i < this.typhoonHistoryTb.length; i++) {
        if (this.typhoonHistoryTb[i].is_current === 1) {
          bol = true;
          break;
        }
      }
      return bol;
    },
  },
  watch: {
    // 监听当地图搜索框内容变化时
    mapSearchInput(newStr) {
      this.mapSearchChange(newStr);
    },
  },
  activated() {
    if (layers.Map) {
      // 解决 Web页面进行缩放时，再次进入数据一张图路由，会出现空白状态
      layers.Map.updateSize();
    }
  },
  mounted() {
    this.layerTypes = JSON.parse(JSON.stringify(leftReadDetails)); // 初始化左侧信息栏的选择状态
    setTimeout(() => {
      // 初始化 地图
      this.initMap();
    }, 20);
  },
  data() {
    return {
      // 记录左边信息栏 显示或隐藏 的状态
      isIn: false,
      // 左边信息栏 显示数据
      layerTypes: [],
      // 水位图例 列表
      waterLegend: [],
      // 雨 时间轴 时间 数据
      rainLayerArr: [],
      // 风力风向 时间轴 时间 数据
      windLayerArr: [],
      // 温度 时间轴 时间 数据
      temperatureLayerArr: [],
      // 群众热力分布 时间轴 时间 数据
      massHeatLayerArr: [],
      // 记录雨 时间轴 显示或隐藏 的状态
      rainLayerTimeAxis: false,
      // 记录风力风向 时间轴 显示或隐藏 的状态
      windLayerTimeAxis: false,
      // 记录台风路径信息 显示或隐藏
      isShowTyphoonInfo: false,
      // 记录台风路径信息隐藏时图标 显示或隐藏
      isShowTyphoonClose: false,
      // 记录台风路径表格 loading 显示或隐藏状态
      showTyphoonLoading: false,
      // 台风 标题 列表
      typhoonTitles: [],
      // 历史台风 thead
      typhoonHistoryTh: typhoonHistoryTh(this),
      // 历史台风 tbody
      typhoonHistoryTb: [],
      // 历史台风强度图例
      typhoonStrongLegend,
      // 历史台风预测台图例
      typhoonForecastLegend,
      // 云图、雷达时间
      cloudradarTimes: [],
      // 记录温度 时间轴 显示或隐藏 的状态
      temperatureLayerTimeAxis: false,
      // 记录群众热力分布 时间轴 显示或隐藏 的状态
      massHeatLayerTimeAxis: false,
      // 记录群众热力分布 图例 显示或隐藏 的状态
      isHeatMapLegend: false,
      // 记录地图搜索框 显示或隐藏状态
      isShowSearch: true,
      // 地图搜索框 类别
      searchType: 'river',
      // 记录地图搜索框 类别 显示或隐藏 的状态
      showSearchType: false,
      // 地图搜索框 内容
      mapSearchInput: '',
      // 地图搜索框 内容 clone 出来, 用于搜索后 内容 的保存
      mapSearchInputClone: '',
      // 地图搜索框显示 列表
      mapSearchList: [],
      // 记录地图搜索框显示 列表 显示或隐藏 的状态
      showSearchContent: false,
      // 记录地图搜索框没有记录时 显示或隐藏 的状态
      showNoSearchResult: false,
      // 记录空间查询 开启或关闭 的状态
      mapSearchSapceStatus: true,
      // 记录清楚空间查询结果 显示或隐藏 的状态
      showMapSearchSpaceClear: false,
      // 记录Loading 显示或隐藏 的状态
      showLoading: false,
      // 是否佛山河流
      isFoShanRiver: false,
      // 区域列表
      areaList: [],
      indeterminate: true,
      checkAll: false,
      checkAllGroup: [],
      checkList: [{name: '张三', level: 1}, {name: '李四', level: 2}, {name: '王五', level: 3}],
      chanchenList: []
    };
  },
  methods: {
    // 清除搜索结果
    clearMapSearch() {
      if (this.mapSearchList.length) {
        this.mapSearchList = [];
      }

      if (this.showSearchContent) {
        this.showSearchContent = false;
      }

      if (this.showNoSearchResult) {
        this.showNoSearchResult = false;
      }

      if (
        layers[searchLayerName] &&
        layers[searchLayerName].layer.getVisible()
      ) {
        this.removeLayer({
          layer: searchLayerName,
        });
      }

      layers.Map.removeOverlay(layers.searchClickLayer);
    },
    // 清除搜索河流结果
    clearMapSearchRiver() {
      if (
        layers.searchRiverLayer &&
        layers.searchRiverLayer.layer.getVisible()
      ) {
        layers.Map.removeLayer(layers.searchRiverLayer.layer);
      }
    },
    // 清除空间搜索结果
    clearMapSearchSpace() {
      if (layers.searchSpaceDrawLayer.getSource().getFeatures().length) {
        layers.searchSpaceDrawLayer.getSource().clear();
      }

      if (this.showMapSearchSpaceClear) {
        this.showMapSearchSpaceClear = false;
      }

      layers.Map.removeOverlay(layers.searchSpaceTypeLayer);
    },
    // 点击清除空间查询结果时 触发
    mapSearchSpaceClear() {
      this.clearMapSearch();
      this.clearMapSearchSpace();
    },
    // 空间查询状态切换时 触发
    mapSearchSpace() {
      this.mapSearchSapceStatus = !this.mapSearchSapceStatus;
      if (!this.mapSearchSapceStatus) {
        this.mapSearchInputClone = '空间查询';
        this.mapSearchDelete();
        this.deleteNormalLayer();
        layers['searchSpaceDraw'].setActive(true);
      } else {
        layers['searchSpaceDraw'].setActive(false);
      }
    },
    // 点击 地图搜索框操作显示面板 时触发
    backMapSearchList() {
      this.showSearchContent = true;

      layers.Map.removeOverlay(layers.searchClickLayer);

      if (layers.searchSpaceDrawLayer.getSource().getFeatures().length) {
        this.mapSearchInput = '';
        return;
      }

      if (this.mapSearchInputClone !== this.mapSearchInput) {
        this.mapSearchInput = this.mapSearchInputClone;
      }
    },
    // 显示 或 隐藏 地图搜索框类别
    mapSearchTypeClick() {
      this.showSearchType = !this.showSearchType;
    },
    // 选择  地图搜索框类别
    mapSearchTypeChose(name) {
      this.searchType = name;
      this.showSearchType = false;
    },
    // 点击 地图搜索框显示 列表中的某一条数据 时触发
    mapSearchClick(item, index) {
      if (item.CUSTOM_TYPE === 'icons') {
        if (!item.lng || !item.lat) {
          return;
        }

        let center = [item.lng, item.lat];

        layers.Map.addOverlay(layers.searchClickLayer);
        layers.searchClickLayer.setPosition(center);

        let el = getClassEls('searchClick-overLayer')[0];
        let elWarpper = el.children[0];
        elWarpper.innerHTML = item.name;

        layers.Map.getView().animate({ center, duration: 400 });
      } else {
        layers.Map.getView().animate({
          center: item.data.geometry.rings[0][0],
          duration: 400,
        });
        layers.searchRiverLayer.layer.setSource(
          createSearchRiverSource(item.data).source
        );
      }
    },
    // 鼠标移入 地图搜索框显示 列表中的某一条数据 时触发
    mapSearchEnter(item, index) {
      if (item.CUSTOM_TYPE === 'rivers') {
        return;
      }
      let els = getClassEls(`search-overLayer${index}`);
      els[0].style.display = 'block';
    },
    // 鼠标移出 地图搜索框显示 列表中的某一条数据 时触发
    mapSearchLeave(item, index) {
      if (item.CUSTOM_TYPE === 'rivers') {
        return;
      }
      let els = getClassEls(`search-overLayer${index}`);
      els[0].style.display = '';
    },
    // 点击 地图搜索框 清除键 时触发
    mapSearchDelete() {
      this.mapSearchInput = '';
      this.clearMapSearch();
      this.clearMapSearchRiver();
      this.clearMapSearchSpace();
    },
    // 地图搜索框 内容变化时触发，用于 内容为空时，清楚有关搜索的 组件与图层
    mapSearchChange(newStr) {
      if (!newStr) {
        this.mapSearchDelete();
      }
    },
    // 点击 地图搜索框 搜索按钮时 触发
    mapSearch() {
      if (!this.mapSearchInput) {
        errorMessage('请输入搜索信息。');
        return;
      }
      if (this.searchType === 'river') {
        let item = {
          layer: 'searchRiverLayer1',
        };
        this.removeLayer(item);
        this.addLayer(item);
      }
      if (this.searchType === 'icons') {
        this.deleteNormalLayer();
      }
      // alert(this.mapSearchInput)
      this.clearMapSearch();
      this.clearMapSearchRiver();
      this.clearMapSearchSpace();

      if (!this.mapSearchSapceStatus) {
        this.mapSearchSapceStatus = true;
        layers['searchSpaceDraw'].setActive(false);
      }

      this.addLayer({
        layer: searchLayerName,
      });
    },
    // 用于 搜索和空间查询时  清除 普通图层
    deleteNormalLayer() {
      this.layerTypes.map(item => {
        item.children.map(items => {
          if (items.selected && items.mustDelSearch) {
            items.selected = false;
            this.removeLayer(items);
          }
        });
      });
    },
    // 点击关闭 台风列表
    closeShowTyphoonInfo(bol) {
      this.isShowTyphoonInfo = bol;
    },
    // 台风列表 选项改变时候触发
    choseTyphoon(bol, params) {
      let item = params.row;
      let index = params.index;
      if (bol) {
        this.showLoading = true;
        this.typhoonHistoryTb[index].is_current = 1;
        getTyphoonSingelInfo(item.tfbh).then(res => {
          if (res.code === ERR_OK && res.result.length) {
            let info = createTyphoon(res.result[0]);
            layers.typhoonLayer.allLayer[info.tfbh] = info;
            layers.Map.addLayer(info.layer);
            info.overLayerArr.map(item => {
              layers.Map.addOverlay(item);
            });
            this.isShowOverLayer(info.hideClassName);
            this.typhoonTitles.push(res.result[0]);
            this.animateMap(5, [117.43903125000003, 14.345582812500005]);
          }
          this.showLoading = false;
        });
      } else {
        this.typhoonHistoryTb[index].is_current = 0;
        let info = layers.typhoonLayer.allLayer[item.tfbh];
        layers.Map.removeLayer(info.layer);
        info.overLayerArr.map(items => {
          layers.Map.removeOverlay(items);
        });
        let titleIndex = this.typhoonTitles.findIndex(
          items => items.tfbh === item.tfbh
        );
        this.typhoonTitles.splice(titleIndex, 1);

        if (this.typhoonTitles.length === 0) {
          this.chosenClick(
            this.layerTypes[weatherIngIndex].children[typhoonIndex]
          );
        }
      }
    },
    // 过滤 群众热力分布 图例 的标识
    filterHeatMapData(index) {
      let str = ((1 - 0.2 * index) * 30000) / 10000;
      str = str.toFixed(1);

      return `${str}万`;
    },
    // 每一个时间轴中 每一个时间段 点击 时 出发
    timelineClick(obj) {
      switch (obj.layerName) {
        case 'massHeatLayer':
          layers[obj.layerName].setSource(createdKmlSource(obj.item.kml));
          break;
        default:
          layers[obj.layerName].setSource(
            createdArcGISSource(obj.item.serviceResult)
          );
          break;
      }
    },
    // 点击左边信息栏 二级菜单 时 触发
    chosenClick(item) {
      item.selected = !item.selected;
      if (item.selected) {
        this.addLayer(item);
        if (item.mustDelSearch && layers.searchLayer) {
          this.clearMapSearch();
          this.clearMapSearchSpace();
        }
      } else {
        this.removeLayer(item);
      }
    },
    // 点击左边信息栏 时 触发
    detailCLick(item) {
      if(item.name == '佛山河流') {
        this.isFoShanRiver = true;
        if(this.areaList.length === 0){
          this.getAreaLevel();
        }
      }else{
        this.isFoShanRiver = false;
      }
      if (item.selected) {
        return;
      }
      this.layerTypes.map(child => {
        child.selected = false;
      });

      item.selected = true;
    },
    // 行政区域层级
    getAreaLevel() {
      let params = {
        data: {
          control: false
        },
        url: '/law/city/getTree',
        token: storage.session.get('token'),
        success: res => {
          this.areaList = [];
          if(res.data.result && res.data.result[0] && res.data.result[0].children && res.data.result[0].children.length > 0) {
            let areaArr = res.data.result[0].children;
            areaArr.map((item, index) => {
              let town = [{ name: item.value, level: 2, area: item.value, areaIndex: index }];
              if(item.children && item.children.length > 0) {
                let childArr = item.children;
                childArr.map(child => {
                  town.push({ name: child.value, level: 3, area: item.value, areaIndex: index });
                })
              }
              this.areaList.push({ name: item.value, level: 1, children: town, indeterminate: false, checkAll: false, checkAllGroup: [], list: [] });
            })
          }
        }
      }
      ajaxPost(params);
    },
    // 全选区
    handleCheckAll (area) {
        let layerName = this.formatRiverName(area.name);
        if (area.indeterminate) {
            area.checkAll = false;
        } else {
            area.checkAll = !area.checkAll;
        }
        area.indeterminate = false;
        if (area.checkAll) {
            area.checkAllGroup = area.children.map(item => {return item.name+','+item.level});
            let list = [{"area":area.name,"level":"区级"},{"area":area.name,"level":"镇级","is_patr":"0"}];
            this.removeFoshanRiver(layerName);
            this.addFoshanRiver(layerName, list);
        } else {
            area.checkAllGroup = [];
            this.removeFoshanRiver(layerName);
        }
    },
    // 多选框改变
    checkAllGroupChange (data, area) {
        let layerName = this.formatRiverName(area.name);
        area.list = [];
        if (data.length === area.children.length) {
          area.indeterminate = false;
          area.checkAll = true;
          area.list = [{"area":area.name,"level":"区级"},{"area":area.name,"level":"镇级","is_patr":"0"}];
          this.removeFoshanRiver(layerName);
          this.addFoshanRiver(layerName, area.list);
        }else if (data.length > 0) {
          area.indeterminate = true;
          area.checkAll = false;
          area.list = [{"area":area.name,"level":"区级"}];
          let townList = data.filter(item => {
            return item.split(',')[1] == '3';
          })
          if (townList.length === 1) {
            area.list.push({"area":area.name,"level":"镇级","is_patr":"0", "town": townList[0].split(',')[0]});
          } else if (townList.length > 1) {
            let tempList = townList.map(item => {return item.split(',')[0]});
            let townName = tempList.join(',') + '|#|in';
            area.list.push({"area":area.name,"level":"镇级","is_patr":"0", "town": townName});
          }
          this.removeFoshanRiver(layerName);
          this.addFoshanRiver(layerName, area.list);
        } else {
          area.indeterminate = false;
          area.checkAll = false;
          this.removeFoshanRiver(layerName);
        }
    },
    // 点击佛山河流区镇
    addFoshanRiver(layerName, list) {
      getLayer(layerName, { list: list }).then(res => {
        if (res.code === ERR_OK && res.layer) {
          this.addLayerAndOverLayer(layerName, res);
          this.isShowOverLayer(res.hideClassName);
        } else if (res.code === ERR_CUSTOM) {
          errorNotice(res.message);
        } else {
          errorMessage('抱歉! 暂时没有该图层信息');
        }
        this.showLoading = false;
      });
    },
    // 删除佛山河流图层
    removeFoshanRiver(layerName) {
      if(layers[layerName] && layers[layerName]['layer']) {
        layers.Map.removeLayer(layers[layerName]['layer']);
      }

      if (layers[layerName] && layers[layerName]['overLayerArr']) {
        layers[layerName]['overLayerArr'].map(item => {
          layers.Map.removeOverlay(item);
        });
      }
    },
    // 格式化佛山河流名称
    formatRiverName(name) {
      let layerName = '';
      switch(name) {
        case '禅城区': 
          layerName = 'chanchenLayer';
          break;
        case '南海区': 
          layerName = 'nanhaiLayer';
          break;
        case '顺德区': 
          layerName = 'shundeLayer';
          break;
        case '高明区': 
          layerName = 'gaomingLayer';
          break;
        case '三水区': 
          layerName = 'sanshuiLayer';
          break;
        default: 
          layerName = 'chanchenLayer';
      }
      return layerName;
    },
    // 点击左边信息栏 显示 或 隐藏时 触发
    leftReadScaleClick() {
      this.isIn = !this.isIn;
    },
    // 用于当地图图层  Zoom 级别 小于 预定className级别时，显示 图标信息 overLayer
    isShowOverLayer(className) {
      if (className) {
        let elArr = getClassEls(className);
        let str = '';

        if (this.zoom < +className.split('-')[1]) {
          str = 'none';
        } else {
          str = 'block';
        }

        for (let i = 0; i < elArr.length; i++) {
          elArr[i].style.display = str;
        }
      } else {
        let classNames = [
          'mustHideOverLayers-7',
          'mustHideOverLayers-12',
          'mustHideOverLayers-15',
        ];
        classNames.map(item => {
          let elArr = getClassEls(item);
          let str = '';

          if (this.zoom < +item.split('-')[1]) {
            str = 'none';
          } else {
            str = 'block';
          }

          for (let i = 0; i < elArr.length; i++) {
            elArr[i].style.display = str;
          }
        });
      }
    },
    // 点击水网时 触发
    showSingleWaterNet(lat, lng) {
      getSingleWaterNet(lat, lng).then(res => {
        if (res.error) {
          errorNotice('获取数据失败');
          return;
        }
        if (!res.results.length) {
          return;
        }

        let name = res.results[0].attributes.name;

        // 高亮显示这条河
        layers.singleWaterNetLayer.setSource(
          createSearchRiverSource(res.results[0]).source
        );

        // 获取该条河的信息
        getWaterNetInfo(1, {
          rivname: name,
          //						strivid: "CA638DE8-8838-456D-8A3B-63E5E3A5CACD"
        }).then(res => {
          if (res.code === ERR_OK) {
            if (res.result.result.length) {
              this.$refs['singleWaterNet-model'].show();
              this.setSingleWaterNetInfo(res.result.result[0]);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
          }
        });
      });
    },
    // 右下角 图层 切换时 触发，触发该事件 在 Parent 组件
    layerChange(obj) {
      layers.baseLayer.setVisible(obj.base);
      layers.heightLayer.setVisible(obj.height);
      layers.GdPanoramaLayer.setVisible(obj.panorama);
      layers.FsPanoramaLayer.setVisible(obj.panorama);
      layers.FsNhLayer.setVisible(obj.panorama);
    },
    animateMap(zoom, center, callback) {
      layers.Map.getView().animate(
        {
          zoom,
          center,
        },
        () => {
          if (callback) {
            callback();
          }
        }
      );
    },
    // 增加Layer和OverLayer
    addLayerAndOverLayer(layerName, res) {
      layers[layerName] = res;
      layers.Map.addLayer(res.layer);

      if (res.overLayerArr) {
        res.overLayerArr.map(item => {
          layers.Map.addOverlay(item);
        });
      }
    },
    // 地图增加图层
    addLayer(item) {
      let layerName = item.layer;

      switch (layerName) {
        // 基础水利-基础水网
        case 'waterNetLayer':
          layers.waterNetLayer.setVisible(true);
          layers.singleWaterNetLayer.setVisible(true);
          break;
        // 气象-土壤湿度
        case 'soilMoistureLayer':
          this.$refs['soilMoisture-model'].show(item);
          break;
        // 气象-气象预警
        case 'weatherWarningLayer':
          this.showLoading = true;
          getLayer(layerName).then(res => {
            if (res.code === ERR_OK && res.overLayerArr) {
              layers[layerName] = {};
              layers[layerName]['overLayerArr'] = res.overLayerArr;
              res.overLayerArr.map(item => {
                layers.Map.addOverlay(item);
              });
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.showLoading = false;
          });
          break;


        // 气象-台风路径
        case 'typhoonLayer':
          this.showLoading = true;
          this.showTyphoonLoading = true;
          this.isShowSearch = false;
          this.mapSearchDelete();
          this.mapSearchSapceStatus = true;
          layers['searchSpaceDraw'].setActive(false);

          getTyphoonList().then(res => {
            if (res.code === ERR_OK && res.result.length) {
              this.typhoonHistoryTb = res.result;
            }
            this.showTyphoonLoading = false;
          });
          getLayer(layerName).then(res => {
            if (res.code === ERR_OK) {
              layers[layerName] = res;
              if (res.isHaveTyphoon) {
                let allLayer = layers[layerName].allLayer;
                this.typhoonTitles = [];
                for (let key in allLayer) {
                  layers.Map.addLayer(allLayer[key]['layer']);
                  allLayer[key]['overLayerArr'].map(item => {
                    layers.Map.addOverlay(item);
                  });
                  this.typhoonTitles.push(allLayer[key].info);
                }
              }
              layers.Map.addOverlay(layers[layerName]['ringTip']);
              layers.Map.addOverlay(layers[layerName]['baseInfo']);
              this.isShowOverLayer(res.hideClassName);
              this.animateMap(5, [117.43903125000003, 14.345582812500005]);
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.isShowTyphoonInfo = true;
            this.isShowTyphoonClose = true;
            this.showLoading = false;
          });
          break;
        // 气象-云图、雷达
        case 'cloudLayer':
        case 'radarLayer':
          this.showLoading = true;
          this.isShowSearch = false;
          this.mapSearchDelete();
          this.mapSearchSapceStatus = true;
          layers['searchSpaceDraw'].setActive(false);

          getLayer(layerName).then(res => {
            if (res.code === ERR_OK) {
              layers[layerName] = res;

              let name = '',
                length;
              layerName === 'cloudLayer' ? (name = '云图') : (name = '雷达');
              this.cloudradarTimes.push({
                name,
                info: layers[layerName].info[layers[layerName].info.length - 1],
              });
              let index = layers[layerName].info.length - 2;
              layers.Map.addLayer(res.layer);
              layers[layerName]['timeInterval'] = setInterval(() => {
                layers[layerName].layer.setSource(
                  new ol.source.ImageStatic({
                    url: layers[layerName].info[index].imageurl,
                    imageExtent: res.extent,
                  })
                );
                let listIndex = this.cloudradarTimes.findIndex(
                  item => item.name === name
                );
                this.cloudradarTimes[listIndex].info =
                  layers[layerName].info[index];
                index--;
                if (index === -1) {
                  index = layers[layerName].info.length - 1;
                }
              }, 500);
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.animateMap(5, [97.52203906250003, 25.683473437500012]);
            this.showLoading = false;
          });
          //						this.$refs['typhoon-model'].show(item);
          break;
        // 气象-雨、风力风向、温度 |三防人员-群众热力分布
        case 'rainLayer':
        case 'windLayer':
        case 'temperatureLayer':
        case 'massHeatLayer':
          this[`${layerName}TimeAxis`] = true;
          this.showLoading = true;
          getLayer(layerName).then(res => {
            if (res.code === ERR_OK && res.layer) {
              layers[layerName] = res.layer;
              layers.Map.addLayer(res.layer);
              this[`${layerName}Arr`] = res.result;
              if (layerName === 'massHeatLayer') {
                this.isHeatMapLegend = true;
              }
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.showLoading = false;
          });
          break;
        // 三防-路网
        case 'roadNetLayer':
          if (layers[layerName] !== undefined) {
            layers.Map.addLayer(layers[layerName]);
            return;
          }
          layers[layerName] = getLayer(layerName);
          layers.Map.addLayer(layers[layerName]);
          break;
        // 实时水利-水闸、泵站
        case 'gateLayer':
        case 'pumpLayer':
          this.showLoading = true;
          let index = this.waterLegend.findIndex(
            item => item.className === 'waterLevel-legend'
          );
          if (index === -1) {
            this.waterLegend.push({
              className: 'waterLevel-legend',
              title: '水闸、泵站水情图例',
              content: [
                {
                  img: `${Static}img/aPicture/leftReadLegendYellow.png`,
                  name: '涨',
                },
                {
                  img: `${Static}img/aPicture/leftReadLegendBlue.png`,
                  name: '平',
                },
                {
                  img: `${Static}img/aPicture/leftReadLegendGreen.png`,
                  name: '落',
                },
                {
                  img: `${Static}img/aPicture/leftReadLegendBluew.png`,
                  name: '正常',
                },
                {
                  img: `${Static}img/aPicture/leftReadLegendRed.png`,
                  name: '超警戒/汛限',
                },
              ],
            });
          }
          getLayer(layerName).then(res => {
            if (res.code === ERR_OK && res.layer) {
              this.addLayerAndOverLayer(layerName, res);
              this.isShowOverLayer(res.hideClassName);
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.showLoading = false;
          });
          break;
        // 实时水利-水库、内涝站、水位站、水文站、潮位站 | 供排水-下沉隧道 | 视频监控-水利工程
        case 'reservoirLayer':
        case 'waterloggingLayer':
        case 'waterLevelLayer':
        case 'hydrologyLayer':
        case 'tideGaugeLayer':
          this.showLoading = true;
          getLayer(layerName).then(res => {
            if (res.code === ERR_OK && res.layer) {
              this.addLayerAndOverLayer(layerName, res);
              this.isShowOverLayer(res.hideClassName);
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.showLoading = false;
          });
          break;
        case 'searchLayer':
          this.showLoading = true;
          let layerType =
            this.searchType === 'icons'
              ? 'searchBuildLayer'
              : 'searchRiverLayer';
          getLayer(layerType, {
            searchContent: this.mapSearchInput,
          }).then(res => {
            if (res.code === ERR_OK && res.result.length) {
              if (layerType === 'searchBuildLayer') {
                this.addLayerAndOverLayer(layerName, res);
                this.animateMap(
                  11,
                  [113.07222331943497, 23.096714446570523],
                  () => {
                    this.showSearchContent = true;
                    this.mapSearchList = res.result;
                  }
                );
              } else {
                layers.searchRiverLayer = res;
                layers.Map.addLayer(res.layer);
                this.animateMap(
                  11,
                  res.result[0].data.geometry.rings[0][0],
                  () => {
                    this.showSearchContent = true;
                    this.mapSearchList = res.result;
                  }
                );
              }
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              this.showNoSearchResult = true;
            }
            this.mapSearchInputClone = this.mapSearchInput;
            this.showLoading = false;
          });
          break;
        case 'searchSpaceLayer':
          this.showLoading = true;
          this.showMapSearchSpaceClear = true;

          getLayer(layerName, {
            center: this.searchSpaceCenter,
            local: this.searchSpaceDistance,
          }).then(res => {
            if (res.code === ERR_OK && res.result.data.length) {
              this.addLayerAndOverLayer('searchLayer', res);

              layers.searchSpaceTypeLayer = res.typeLayer;
              layers.searchSpaceTypeLayer.setPosition([
                this.searchSpaceCenter[0],
                this.searchSpaceCenter[1] + this.searchSpaceRadius,
              ]);
              layers.Map.addOverlay(layers.searchSpaceTypeLayer);
              this.animateMap(11, this.searchSpaceCenter, () => {
                this.showSearchContent = true;
                this.mapSearchList = res.result.data;
              });
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              this.showNoSearchResult = true;
            }

            this.mapSearchSpace();
            this.showLoading = false;
          });
          break;
        case 'searchRiverLayer1':
          getLayer(layerName, { name: this.mapSearchInput }).then(res => {
            if (res.code === ERR_OK && res.layer) {
              this.addLayerAndOverLayer(layerName, res);
              this.isShowOverLayer(res.hideClassName);
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            this.showLoading = false;
          });
          break;
        // 其他图层
        default:
          if (layers[layerName] !== undefined) {
            if (layers[layerName].layer) {
              this.addLayerAndOverLayer(layerName, layers[layerName]);
              this.isShowOverLayer(layers[layerName].hideClassName);
            } else {
              layers.Map.addLayer(layers[layerName]);
            }
            return;
          }
          // this.showLoading = true;
          getLayer(layerName).then(res => {
            if (res.code === ERR_OK && res.layer) {
              this.addLayerAndOverLayer(layerName, res);
              this.isShowOverLayer(res.hideClassName);
            } else if (res.code === ERR_CUSTOM) {
              errorNotice(res.message);
            } else {
              errorMessage('抱歉! 暂时没有该图层信息');
            }
            // this.showLoading = false;
          });
          break;
      }
    },
    // 删除Layer和OverLayer
    removeLayerAndOverLayer(layerName) {
      layers.Map.removeLayer(layers[layerName]['layer']);

      if (layers[layerName]['overLayerArr']) {
        layers[layerName]['overLayerArr'].map(item => {
          layers.Map.removeOverlay(item);
        });
      }
    },
    // 地图删除图层
    removeLayer(item) {
      let layerName = item.layer;

      if (!layers[layerName]) {
        return;
      }

      switch (layerName) {
        // 水网
        case 'waterNetLayer':
          layers.waterNetLayer.setVisible(false);
          layers.singleWaterNetLayer.setVisible(false);
          break;
        // 气象-雨、风力风向、温度 |三防人员-群众热力分布
        case 'rainLayer':
        case 'windLayer':
        case 'temperatureLayer':
        case 'massHeatLayer':
          this.$refs[`${layerName}TimeAxis`].refresh();
          this[`${layerName}TimeAxis`] = false;
          layers.Map.removeLayer(layers[layerName]);
          if (layerName === 'massHeatLayer') {
            this.isHeatMapLegend = false;
          }
          break;
        // 气象-气象预警
        case 'weatherWarningLayer':
          layers[layerName]['overLayerArr'].map(item => {
            layers.Map.removeOverlay(item);
          });
          break;
        // 气象-台风路径
        case 'typhoonLayer':
          if (
            !this.layerTypes[weatherIngIndex].children[cloudIndex].selected &&
            !this.layerTypes[weatherIngIndex].children[radarIndex].selected
          ) {
            this.isShowSearch = true;
          }
          this.isShowTyphoonInfo = false;
          for (let key in layers[layerName].allLayer) {
            let info = layers[layerName].allLayer[key];
            layers.Map.removeLayer(info['layer']);
            info['overLayerArr'].map(item => {
              layers.Map.removeOverlay(item);
            });
          }
          layers.Map.removeOverlay(layers[layerName]['ringTip']);
          layers.Map.removeOverlay(layers[layerName]['baseInfo']);
          this.typhoonTitles = [];
          this.isShowTyphoonClose = false;
          break;
        // 气象-云图、雷达
        case 'cloudLayer':
        case 'radarLayer':
          layers.Map.removeLayer(layers[layerName].layer);
          clearInterval(layers[layerName].timeInterval);

          let name = '';
          if (layerName === 'cloudLayer') {
            name = '云图';
            if (
              !this.layerTypes[weatherIngIndex].children[typhoonIndex]
                .selected &&
              !this.layerTypes[weatherIngIndex].children[radarIndex].selected
            ) {
              this.isShowSearch = true;
            }
          } else {
            name = '雷达';
            if (
              !this.layerTypes[weatherIngIndex].children[typhoonIndex]
                .selected &&
              !this.layerTypes[weatherIngIndex].children[cloudIndex].selected
            ) {
              this.isShowSearch = true;
            }
          }
          let index = this.cloudradarTimes.findIndex(
            item => item.name === name
          );
          this.cloudradarTimes.splice(index, 1);

          break;
        // 实时水利-水闸、泵站
        case 'gateLayer':
        case 'pumpLayer':
          if (
            !this.layerTypes[waterLevelIngIndex].children[gateIndex].selected &&
            !this.layerTypes[waterLevelIngIndex].children[pumpIndex].selected
          ) {
            let index = this.waterLegend.findIndex(
              item => item.className === 'waterLevel-legend'
            );
            this.waterLegend.splice(index, 1);
          }

          this.removeLayerAndOverLayer(layerName);
          break;
        // 其他图层
        default:
          this.removeLayerAndOverLayer(layerName);
          break;
      }
    },
    // 初始化空间查询 画图工具
    initDraw() {
      layers['searchSpaceDraw'] = createMapCircleDraw(
        layers.Map,
        layers.searchSpaceDrawLayer
      );

      layers['searchSpaceDraw'].init();

      layers['searchSpaceDraw'].Circle.on('drawstart', e => {
        this.searchType = 'icons';
        this.clearMapSearch();
        this.clearMapSearchSpace();
      });
      layers['searchSpaceDraw'].Circle.on('drawend', e => {
        let geometry = e.feature.getGeometry();
        let center = geometry.getCenter();
        let radius = geometry.getRadius();
        let edgeCoordinate = [center[0] + radius, center[1]];
        this.searchType = 'icons';

        // 计算 经纬度 两点间距离
        let wgs84Sphere = new ol.Sphere(6378137);
        let distance = wgs84Sphere.haversineDistance(center, edgeCoordinate);

        this.searchSpaceCenter = center;
        this.searchSpaceDistance = distance;
        this.searchSpaceRadius = radius;

        this.addLayer({
          layer: 'searchSpaceLayer',
        });
      });
    },
    // 初始化地图
    initMap() {
      layers = {};
      layers.baseLayer = getLayer('baseLayer');
      layers.heightLayer = getLayer('heightLayer');
      layers.GdPanoramaLayer = getLayer('GdPanoramaLayer');
      layers.FsPanoramaLayer = getLayer('FsPanoramaLayer');
      layers.FsNhLayer = getLayer('FsNhLayer');
      layers.waterNetLayer = getLayer('GDwaterNetLayer');
      layers.singleWaterNetLayer = getLayer('singleWaterNetLayer');
      layers.notionLayer = getLayer('notionLayer');
      layers.warnLineLayer = getLayer('warnLineLayer');
      layers.searchClickLayer = getLayer('searchClickLayer');
      layers.searchSpaceDrawLayer = getLayer('searchSpaceDrawLayer');

      layers.baseLayer.setVisible(true);

      layers.Map = createMap(this.$refs['aPicture-map'], [
        layers.baseLayer,
        layers.heightLayer,
        layers.GdPanoramaLayer,
        layers.FsPanoramaLayer,
        layers.FsNhLayer,
        layers.waterNetLayer,
        layers.singleWaterNetLayer,
        layers.notionLayer,
        layers.warnLineLayer,
        layers.searchSpaceDrawLayer,
      ]);

      this.initDraw();

      layers.Map.on('singleclick', event => {
        if (layers['searchSpaceDraw'].getActive()) {
          return;
        }

        let pixel = event.pixel;
        let lng = event.coordinate[0];
        let lat = event.coordinate[1];
        let features = [];
        let layerNames = [];

        layers.Map.forEachFeatureAtPixel(pixel, function (feature, layer) {
          features.push(feature);
          if (layer) {
            layerNames.push(
              layer.get('name') === null ? '' : layer.get('name')
            );
          }
        });

        if (layerNames[0] === 'searchSpaceDrawLayer') {
          return;
        }

        if (
          features.length &&
          layerNames[0] &&
          layerNames[0] !== 'singleWaterNetLayer' &&
          layerNames[0] !== 'searchRiverLayer' &&
          layerNames[0] !== 'typhoonLayer'
        ) {
          let layer = layerNames[0];
          if (layer === 'searchLayer') {
            this.$refs[`${features[0].get('content').type}-model`].show(
              features[0],
              layer
            );
          } else if (
            layer === 'shundeLayer' ||
            layer === 'chanchenLayer' ||
            layer === 'nanhaiLayer' ||
            layer === 'sanshuiLayer' ||
            layer === 'gaomingLayer' ||
            layer === 'searchRiverLayer1'
          ) {
            this.$refs['foshanriver-model'].show(features[0], layer);
          } else {
            this.$refs[`${spliceStr(0, layer.length - 5, layer)}-model`].show(
              features[0]
            );
          }

          return;
        }

        if (layerNames[0] === 'searchRiverLayer') {
          this.showSingleWaterNet(lng, lat);
          return;
        }

        if (layers.waterNetLayer.getVisible()) {
          this.showSingleWaterNet(lng, lat);
        }
      });

      /* layers.Map.on('pointermove', (event) => {
				if (!this.layerTypes[weatherIngIndex].children[typhoonIndex].selected) {
					return;
				}

				if(!this.typhoonHistoryChosed) {
					return;
				}

				let pixel = event.pixel;
				let lng = event.coordinate[0];
				let lat = event.coordinate[1];
				let pointFeatures = [];
				let ringFeatures = [];
				layers.Map.forEachFeatureAtPixel(pixel, function(feature, layer) {
					if(layer && layer.get('name') === 'typhoonLayer' && feature.get('custom_name') === 'typhoonPoint') {
						pointFeatures.push(feature);
					}

					if (layer && layer.get('name') === 'typhoonLayer' && feature.get('custom_name') === 'typhoonRing') {
						ringFeatures.push(feature);
					}
				});

				if (pointFeatures.length || ringFeatures.length) {
					layers.Map.getTarget().style.cursor = 'pointer';
				}else {
					layers.Map.getTarget().style.cursor = '';
				}

				let ringTip = document.getElementsByClassName('typhoon-ringTip')[0];
				let baseTip = document.getElementsByClassName('typhoon-baseTip')[0];

				if (ringFeatures.length) {
					layers['typhoonLayer']['ringTip'].setPosition([lng, lat]);
					let name = ringFeatures[0].get('ring_name');
					let length = ringFeatures[0].get('ring_length');
					ringTip.children[0].innerHTML = `${name}(东北: ${length.ne}km, 东南: ${length.se}km, 西北: ${length.nw}km, 西南: ${length.sw}km)`;
					ringTip.style.display = 'block';
				}else {
					ringTip.style.display = '';
				}

				if (pointFeatures.length) {
					layers['typhoonLayer']['baseInfo'].setPosition([lng, lat]);
					let info = pointFeatures[0].get('content');
					let type = pointFeatures[0].get('custom_type');
					let obj = filterTyphoonBaseInfo(type, info);
					baseTip.children[0].children[0].innerHTML = obj.title;
					baseTip.children[0].children[1].innerHTML = obj.str;
					baseTip.style.display = 'block';
					ringTip.style.display = '';
				}else {
					baseTip.style.display = '';
				}
			}); */

      this.zoom = layers.Map.getView().getZoom();

      layers.Map.getView().on('propertychange', e => {
        let zoom = layers.Map.getView().getZoom();
        zoom = parseInt(zoom);

        if (this.zoom !== zoom) {
          this.zoom = zoom;
          this.isShowOverLayer();
        }

        if (this.showSearchContent) {
          this.showSearchContent = false;
        }

        if (this.showNoSearchResult) {
          this.showNoSearchResult = false;
        }
      });
    },
    ...mapMutations({
      // 设置 全局的 内河涌基本信息
      setSingleWaterNetInfo: 'SET_SINGLEWATERNETINFO',
    }),
  },
};
</script>

<style lang="scss">
@import '~common/scss/color';
.aPictureInfo {
  width: 100%;
  height: 100%;
  position: relative;
  .aPicture-map {
    width: 100%;
    height: 100%;
    .aPicture-map-infoOverLayer {
      transform: translate3D(-50%, -100%, 0);
      white-space: nowrap;
      position: relative;
      .aPicture-map-infoOverLayer-warpper {
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: 1px 1px 1px 1px #ccc;
        padding: 5px;
      }
      .blue {
        color: $color-blue;
      }
      .red {
        color: $color-danger;
      }
      .boxTail {
        text-align: center;
      }
    }
    .weather-warning {
      .weather-warning-li {
        display: flex;
        align-items: center;
        img {
          width: 40px;
          margin-right: 5px;
        }
      }
    }
    .water-level {
      .water-level-img {
        width: 12px;
        vertical-align: middle;
      }
      .water-level-warnImg {
        width: 12px;
        vertical-align: middle;
        margin-top: -3px;
      }
    }
    .pad-10 {
      .aPicture-map-infoOverLayer-warpper {
        padding: 10px;
      }
    }
    .search-overLayer,
    .typhoon-ringTip,
    .typhoon-baseTip {
      display: none;
    }
    .searchSpaceType-overLayer {
      width: 300px;
      .searchSpaceType-detail {
        margin-right: 10px;
        margin-bottom: 5px;
      }
    }
    .typhoon-ringCenter {
      width: 35px;
      height: 35px;
      background-image: url(./img/typhoonstatic.png);
      transform: translate3D(-50%, -50%, 0);
      transform-origin: center center;
      animation: ringCenterAnimate 1s linear infinite;
      z-index: 99;
    }
    @keyframes ringCenterAnimate {
      from {
        transform: translate3D(-50%, -50%, 0) rotate(0deg);
      }
      to {
        transform: translate3D(-50%, -50%, 0) rotate(360deg);
      }
    }
    .typhoon-ringTip {
      z-index: 100;
    }
    .typhoon-time {
      background-color: white;
      color: black;
    }
    .typhoon-baseTip {
      z-index: 100;
      .typhoon-baseTip-warpper {
        width: 250px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 5px;
        border: 1px solid lightgray;
        padding: 0 10px;
        .typhoon-baseTip-header {
          height: 30px;
          line-height: 30px;
          border-bottom: 1px solid lightgray;
          color: $color-blue;
        }
        .typhoon-baseTip-content {
          padding: 5px 0;
          color: $color-blue;
          .typhoon-baseTip-key {
            font-size: 14px;
            font-weight: 700;
            color: #495060;
          }
        }
      }
    }
  }
  .aPicture-search-space {
    height: 38px;
    position: fixed;
    top: 40px;
    right: 450px;
    display: flex;
    align-items: center;
    background-color: $color-default;
    color: white;
    box-shadow: 1px 1px 1px 1px lightgray;
    font-size: 14px;
    padding: 0 10px;
    cursor: pointer;
    &:hover {
      background-color: #2e77e5;
    }
    &.aPicture-search-spaceClose {
      background-color: $color-danger;
      &:hover {
        background-color: #e81212;
      }
    }
    span {
      margin-left: 5px;
    }
  }
  .aPicture-search-spaceClear {
    width: 121px;
    text-align: center;
    position: fixed;
    top: 80px;
    right: 450px;
    color: $color-danger;
    cursor: pointer;
  }
  .aPicture-search-typeList {
    width: 323px;
    height: 30px;
    z-index: 2;
    position: fixed;
    top: 44px;
    right: 87px;
    background-color: $color-default;
    color: #ccc;
    text-align: center;
    display: flex;
    align-items: center;
    overflow: hidden;
    .aPicture-search-icons,
    .aPicture-search-rivers {
      flex: 1;
      cursor: pointer;
      &:hover,
      &.aPicture-search-iconsActive {
        color: white;
      }
    }
    .aPicture-search-typeClose {
      flex: 0 0 30px;
      cursor: pointer;
      &:hover {
        color: white;
      }
    }
  }
  .aPicture-search-form {
    width: 425px;
    height: 38px;
    position: fixed;
    top: 40px;
    right: 20px;
    display: flex;
    align-items: center;
    box-shadow: 1px 1px 1px 1px lightgray;
    .aPicture-search-select {
      width: 150px;
    }
    .aPicture-search-input {
      height: 100%;
      flex: 1;
      font-size: 14px;
      position: relative;
      .aPicture-search-type {
        position: absolute;
        left: 10px;
        top: 8px;
        color: $color-default;
        cursor: pointer;
      }
      input {
        width: 100%;
        height: 100%;
        border: none;
        padding-left: 35px;
      }
      .aPicture-search-delete {
        position: absolute;
        right: 10px;
        top: 7px;
        font-size: 16px;
        color: #ccc;
        cursor: pointer;
        &:hover {
          color: #4c4c4c;
        }
      }
    }
    .aPicture-search-button {
      width: 57px;
      height: 100%;
      background-color: $color-default;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 38px;
      cursor: pointer;
      &:hover {
        background-color: #2e77e5;
      }
    }
  }
  .aPicture-search-actionShow {
    width: 368px;
    padding-left: 10px;
    line-height: 38px;
    position: absolute;
    right: 77px;
    top: 85px;
    background-color: white;
    color: $color-blue;
    box-shadow: 1px 1px 1px 1px lightgray;
    cursor: pointer;
    span {
      margin-left: 5px;
    }
  }
  .aPicture-search-noResult {
    width: 368px;
    padding-left: 10px;
    line-height: 38px;
    position: absolute;
    right: 77px;
    top: 85px;
    background-color: white;
    color: $color-blue;
    box-shadow: 1px 1px 1px 1px lightgray;
  }
  .aPicture-search-content {
    width: 368px;
    max-height: calc(100% - 140px);
    overflow: auto;
    z-index: 100;
    position: absolute;
    right: 77px;
    top: 85px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 1px 1px 1px 1px lightgray;
    .aPicture-search-list {
      width: 100%;
      .aPicture-search-detail {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 5px 0;
        padding-left: 10px;
        cursor: pointer;
        &:hover {
          background-color: #f3f3f3;
        }
        .aPicture-search-icon {
          width: 30px;
          img {
            width: 100%;
          }
        }
        .aPicture-search-text {
          flex: 1;
          margin-left: 5px;
        }
      }
    }
  }
  .left-read {
    width: 160px;
    color: #313131;
    user-select: none;
    position: fixed;
    left: 10px;
    top: 70px;
    z-index: 1;
    .left-read-head {
      width: 100%;
      height: 30px;
      background-color: $color-default;
      color: white;
      line-height: 30px;
      padding-left: 10px;
      font-size: 14px;
      .left-read-scale {
        width: 25px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        cursor: pointer;
      }
      .left-read-scale:hover {
        color: lightgray;
      }
    }
    .left-read-content {
      width: 100%;
      height: 365px;
      overflow: hidden;
      background-color: #fffaf5;
      box-shadow: 1px 1px 1px 1px lightgray;
      transition: all 0.4s ease-in-out;
      .left-read-list {
        .left-read-detail {
          height: 30px;
          padding: 5px 0;
          padding-left: 10px;
          cursor: pointer;
          position: relative;
          .left-read-mask {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
          }
          > .ivu-radio-wrapper {
            display: flex;
            align-items: center;
            > .ivu-radio {
              margin-top: 5px;
            }
          }
          .left-read-typeImg {
            margin-right: 5px;
          }
        }
        .left-read-detail:hover,
        .left-read-detail-selected {
          background-color: white;
          color: $color-default;
        }
      }
    }
    .left-read-in {
      height: 0px;
    }
  }
  .left-read-layers {
    width: 180px;
    top: 100px;
    left: 172px;
    z-index: 0;
    .left-read-content {
      height: auto;
    }
  }
  .waterLevel-legend {
    position: fixed;
    bottom: 10px;
    left: 10px;
    .waterLevel-legend-list {
      .waterLevel-legend-detail {
        background-color: white;
        border: 1px solid $color-default;
        border-radius: 5px;
        margin-top: 5px;
        &.waterLevel-legend {
          width: 270px;
          .waterLevel-legend-head {
            font-size: 12px;
            margin: 5px;
            border-bottom: 1px solid lightgray;
          }
          .waterLevel-legend-content {
            width: 100%;
            padding: 5px;
            display: flex;
            align-items: center;
            .waterLevel-legend-li {
              margin: 0 5px;
              img {
                width: 14px;
                vertical-align: middle;
              }
              span {
                display: inline-block;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
  .heatMap-legend {
    background-color: white;
    border: 1px solid $color-default;
    border-radius: 5px;
    position: fixed;
    bottom: 80px;
    right: 10px;
    .heatMap-legend-warpper {
      width: 90px;
      height: 300px;
      display: flex;
      .heatMap-legend-title {
        width: 20px;
        text-align: center;
        line-height: 1.2em;
        margin: 5px 0;
        border-right: 1px solid lightgray;
      }
      .heatMap-legend-content {
        flex: 1;
        margin: 5px;
        position: relative;
        .heatMap-legend-data {
          width: 20px;
          height: 100%;
          background: linear-gradient(
            #ff0000,
            #ffff00,
            #00ff00,
            #00e4ff,
            #5a00ff
          );
        }
        .heatMap-legend-text {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0px;
          left: 18px;
          .heatMap-legend-detail {
            position: absolute;
            .heatMap-legend-img {
              vertical-align: middle;
            }
            .heatMap-legend-div {
              display: inline-block;
              vertical-align: middle;
            }
          }
          .heatMap-legend-detail:nth-of-type(1) {
            top: 0;
          }
          .heatMap-legend-detail:nth-of-type(2) {
            top: 25%;
          }
          .heatMap-legend-detail:nth-of-type(3) {
            top: 50%;
          }
          .heatMap-legend-detail:nth-of-type(4) {
            top: 75%;
          }
          .heatMap-legend-detail:nth-of-type(5) {
            bottom: -8px;
          }
        }
      }
    }
  }
  .timeAxis {
    width: 80%;
    z-index: 9;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 10px;
    margin: 0 auto;
    .timeAxis-detail {
      margin-top: 5px;
    }
  }
  .typhoon-titles {
    width: 300px;
    position: fixed;
    left: 0;
    right: 0;
    top: 40px;
    margin: 0 auto;
    text-align: center;
    color: red;
    font-weight: 700;
    font-size: 22px;
    .typhoon-titleList {
      width: 100%;
      > li {
        font-weight: 700;
      }
    }
  }
  .typhoon-closIng {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    top: 45px;
    text-align: center;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 22px;
    border-radius: 5px;
    cursor: pointer;
  }
  .typhoon-info {
    width: 400px;
    position: fixed;
    transition: all 0.4s;
    right: -400px;
    top: 45px;
    &.typhoon-info-show {
      right: 0;
    }
    .typhoon-history {
      width: 100%;
      height: 250px;
      background-color: white;
      border-radius: 5px 0 0 5px;
      overflow: hidden;
      .typhoon-history-header {
        height: 30px;
        line-height: 30px;
        background-color: $color-default;
        color: white;
        text-align: center;
        position: relative;
        .typhoon-close {
          cursor: pointer;
          position: absolute;
          right: 12px;
          top: 1px;
          &:hover {
            color: #999;
          }
        }
      }
      .typhoon-history-table {
        padding: 0 5px;
        margin-top: 5px;
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
        user-select: none;
      }
    }
    .typhoon-legend-ring {
      width: 100%;
      height: 60px;
      background-color: white;
      border-radius: 5px 0 0 5px;
      overflow: hidden;
      margin-top: 5px;
      .typhoon-legend-header {
        height: 30px;
        line-height: 30px;
        background-color: $color-default;
        color: white;
        text-align: center;
      }
      .typhoon-legend-list {
        width: 100%;
        height: 30px;
        display: flex;
        align-items: center;
        .typhoon-legend-detail {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          > div:nth-of-type(1) {
            width: 14px;
            height: 14px;
            border-radius: 7px;
          }
          .typhoon-legend-circle-7 {
            border: 1px solid #24b43d;
            background-color: #9bdbcb;
          }
          .typhoon-legend-circle-10 {
            border: 1px solid #dcd024;
            background-color: #f4ff97;
          }
          .typhoon-legend-circle-12 {
            border: 1px solid #e72a1d;
            background-color: #f7b3b2;
          }
        }
      }
    }
    .typhoon-legend-center {
      width: 100%;
      height: 100px;
      background-color: white;
      border-radius: 5px 0 0 5px;
      overflow: hidden;
      margin-top: 5px;
      .typhoon-legend-header {
        height: 30px;
        line-height: 30px;
        background-color: $color-default;
        color: white;
        text-align: center;
      }
      .typhoon-legend-list {
        width: 100%;
        height: 60px;
        display: flex;
        text-align: center;
        margin-top: 10px;
        .typhoon-legend-detail {
          flex: 1;
        }
      }
    }
    .typhoon-legend-prediction {
      width: 100%;
      height: 80px;
      background-color: white;
      border-radius: 5px 0 0 5px;
      overflow: hidden;
      margin-top: 5px;
      .typhoon-legend-header {
        height: 30px;
        line-height: 30px;
        background-color: $color-default;
        color: white;
        text-align: center;
      }
      .typhoon-legend-list {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        text-align: center;
        margin-top: 5px;
        .typhoon-legend-detail {
          flex: 1;
          margin: 0 11px;
          .typhoon-legend-forecast {
            width: 100%;
            height: 3px;
            display: flex;
            align-content: center;
            justify-content: center;
            > div {
              flex: 1;
              margin: 0 2px;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .cloud-radar-time {
    width: 675px;
    position: fixed;
    right: 0;
    top: 10px;
    color: red;
    font-size: 22px;
    .cloud-radar-timeList {
      > li {
        font-weight: 700;
        margin-right: 10px;
      }
    }
  }
}

// 佛山河流
.check-all {
    display: inline-block;
}
.ivu-collapse-simple,
.ivu-collapse-content {
  background-color: #fffaf5;
}
</style>
